table
    {
        border-collapse: collapse;
        margin: 0 auto;
        text-align: center;
    }
    table td, table th
    {
        border: 1px solid #cad9ea;
        color: #666;
        height: 30px;
    }
    table thead th
    {
        background-color: #CCE8EB;
        width: 100px;
    }
    table tr:nth-child(odd)
    {
        background: #fff;
    }
    table tr:nth-child(even)
    {
        background: #F5FAFA;
    }
    table caption {
        padding-top: 8px;
        padding-bottom: 8px;
        color: #777;
        text-align: center;
    }

    * {
        box-sizing: border-box;  /*宽度和高度会包括内边距和边框*/
    }

    div.search {
        padding: 10px 0;
    }

    .inputfrom {
        position: relative;
        width: 300px;
        margin: 0 auto;  /*设置宽度后，居中*/
    }

    input,button {
        border: none;   /*无边框样式；元素的总宽度和高度包括边框的宽度 */
        outline: none;  /*无轮廓样式；轮廓是在元素周围绘制的一条线，在边框之外并且可能与其他内容重叠，以凸显元素，元素的总宽度和高度不受轮廓线宽度的影响。*/
    }

    .search input {
        width: 100%;
        height: 42px;
        padding-left: 13px;
        border: 2px solid #cad9ea;
        border-radius: 19px;   /*border-radius 属性用于向元素添加圆角边框：*/
        background: transparent;  /*背景透明*/
    }

    .search button {
        height: 42px;
        width: 42px;
        cursor: pointer;  /*cursor属性定义了鼠标指针放在一个元素边界范围内时所用的光标形状*/
        position: absolute;
        background: #9cd2d8;
        border-radius: 0 19px 19px 0;
        width: 60px;
        right: 0;
    }
    .search button:hover {
        background-color: #CCE8EB;  /*点击搜索按钮时的背景颜色*/
    }

    /* 在<button>元素后面插入内容，并设置所插入内容的样式： */
    .search button:before {
        content: "搜索";  /*插入的内容*/
        font-size: 13px;  /*插入内容的字体大小*/
        color: #F9F0DA;  /*插入内容的字体颜色*/
    }
